<template>
  <el-form
      ref="form"
      :disabled="disabled"
      :inline="inline"
      :label-position="labelPosition"
      :label-suffix="labelSuffix"
      :label-width="'auto'"
      :model="model"
      scroll-to-error
      status-icon
  >
    <jeesdp-form-item
        v-for="field in fields"
        v-model="model[field.prop]"
        :data="data[field.prop]"
        :field="field"
        :rules="field.rules"
    />
    <slot/>
  </el-form>
</template>

<script setup>
import {ref} from "vue";
import JeesdpFormItem from "./JeesdpFormItem.vue";

defineOptions({
  name: 'JeesdpForm'
});

defineProps({
  fields: {
    type: Array,
    required: true
  },
  model: {
    type: Object,
    required: true
  },
  inline: {
    type: Boolean,
    default: false
  },
  labelPosition: {
    default: 'right'
  },
  labelSuffix: {
    type: String,
    default: '：'
  },
  validate: {
    type: Boolean,
    default: true
  },
  disabled: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: {}
  },
});

const form = ref();

const validate = (callback) => {
  form.value.validate(callback);
}

const reset = () => {
  form.value.resetFields();
}

const clear = (fields) => {
  form.value.clearValidate(fields);
}

defineExpose({validate, reset, clear});

</script>

<style scoped>

</style>
